<template>
  <div>
    <el-form :inline="true" :model="formUser">
    <el-form-item label="登录名">
      <el-input v-model="formUser.loginname" placeholder="登录名"></el-input>
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model="formUser.username" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="query()">查询</el-button>
    </el-form-item>
    </el-form>

    <el-divider></el-divider>

    <el-button type="primary" icon="el-icon-document-add" @click="addUser()">新增</el-button>

    <el-divider></el-divider>

    <el-table
    ref="userList"
    :data="userList"
    stripe
    tooltip-effect="dark"
    style="width: 100%"
    empty-text="暂无数据"
    v-loading="loading"
    @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        align="center"
        width="55">
    </el-table-column>
    <el-table-column
        prop="loginname"
        label="登录名"
        width="150">
    </el-table-column>
    <el-table-column
        prop="username"
        label="姓名"
        width="150">
    </el-table-column>
    <el-table-column
        label="创建时间"
        width="160">
        <template slot-scope="scope">{{ scope.row.createtime }}</template>
    </el-table-column>
    <el-table-column
        label="修改时间"
        width="160">
        <template slot-scope="scope">{{ scope.row.updatetime }}</template>
    </el-table-column>
    <el-table-column
        align="right">
        <template slot-scope="scope">
        <el-button
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click="editUser(scope.$index, scope.row)">编辑</el-button>
        <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>
    </el-table>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.currentPage"
    :page-sizes="[1, 5, 10, 20]"
    :page-size="page.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { queryUserList, delUser } from '@/api/user'

export default {
  name: 'UserList',
  data () {
    return {
      userList: [],
      multipleSelection: [],
      formUser: {
        loginname: '',
        username: ''
      },
      page: {
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      loading: true
    }
  },
  created () {
    this.query()
  },
  methods: {
    handleSizeChange (val) {
      this.page.pageSize = val
      this.query()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.query()
    },
    query () {
      this.userList = []
      this.formUser.page = this.page.currentPage
      this.formUser.rows = this.page.pageSize
      queryUserList(this.formUser).then(response => {
        const { total, rows } = response.data
        this.userList = rows
        this.total = total
        this.loading = false
      }).catch(e => {
        console.log(e)
      })
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    addUser () {
      this.$router.push({ path: '/user/addUser', query: { userid: null, opType: '0' } })
    },
    editUser (index, row) {
      this.$router.push({ path: '/user/editUser', query: { userid: row.userid, opType: '1' } })
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$confirm('请确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser({ userid: row.userid }).then(response => {
          const { msg, nResult } = response.data
          if (nResult === '0') {
            this.$alert('删除成功', '提示', {
              confirmButtonText: '确定',
              type: 'success',
              callback: action => {
                this.query()
              }
            })
          } else {
            this.$alert(msg, '提示', {
              confirmButtonText: '确定',
              type: 'error',
              callback: action => {
              }
            })
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
